<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>账号管理-管理系统</title>
    <meta name="keywords" content="管理系统">
    <meta name="description" content="管理系统">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" type="text/css" href="{$sys_url.plug}admin/static/admin/layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="{$sys_url.plug}admin/static/admin/css/admin.css?"/>
    <link rel="stylesheet" href="{$sys_url.static}layui/css/layui.css" media="all">
    <link rel="stylesheet" href="{$sys_url.static}layui/style/admin.css" media="all">

</head>
<body>
<div>
    <!--<form class="layui-form">
        <div class="layui-form-item layui-elem-quote">
            <div class="layui-inline">
                <label class="layui-form-label">时间范围</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" name="time" id="time" placeholder="开始 到 结束">
                </div>
            </div>
            <button type="button" class="layui-btn btnSearch" lay-filter="search" lay-submit>查询</button>
        </div>
    </form>-->
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">

            <div class="layui-col-sm6 layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">
                        访问量
                        <span class="layui-badge layui-bg-blue layuiadmin-badge">总数</span>
                    </div>
                    <div class="layui-card-body layuiadmin-card-list">
                        <p class="layuiadmin-big-font">{$total}</p>
                        <p>

                            <span class="layuiadmin-span-color"> </span>
                        </p>
                    </div>
                </div>
            </div>

            <div class="layui-col-sm6 layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">
                        今日新增
                        <!--<span class="layui-badge layui-bg-blue layuiadmin-badge"></span>-->
                    </div>
                    <div class="layui-card-body layuiadmin-card-list">

                        <p class="layuiadmin-big-font">{$todaytotal}</p>

                    </div>
                </div>
            </div>

        </div>
    </div>
    <table id="tableList" lay-filter="demo">
        <div class="layui-card">
            <div class="chart-panel panel panel-default">
                <div class="panel-body" id="chart" style="height: 600px;">
                </div>
            </div>
        </div>
    </table>
</div>
</body>
<script src="{$sys_url.static}layui/layui/layui.js"></script>
<script src="{$sys_url.plug}admin/static/admin/lib/echarts/echarts.js"></script>
<script>
    layui.use('laydate', function() {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#time'
            , type: 'datetime'
            , range: '/'
            , format: 'yyyyMMdd'
        });
    });

    layui.use('table', function() {
        var table = layui.table;
        var $ = layui.jquery;
        var form = layui.form;
        var laydate = layui.laydate;

        //重载表格
        $('.btnSearch').on('click', function() {

            location.href="/census/data/index?time="+$('#time').val();
        });
    });
</script>

<script type="text/javascript">

    function url(id,date) {

    }



    layui.use(['layer','jquery'], function(){
        var layer 	= layui.layer;
        var $=layui.jquery;
        //图表
        var myChart;
        require.config({
            paths: {
                echarts: '{$sys_url.plug}/admin/static/admin/lib/echarts'
            }
        });
        require(
            [
                'echarts',
                'echarts/chart/bar',
                'echarts/chart/line',
                'echarts/chart/map'
            ],
            function (ec) {
                //--- 折柱 ---
                myChart = ec.init(document.getElementById('chart'));
                myChart.setOption(
                    {
                        title: {
                            text: '访问分析'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data:["访问量"]
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        toolbox: {
                            show : true,
                            feature : {
                                mark : {show: true},
                                dataView : {show: true, readOnly: false},
                                magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                                restore : {show: true},
                                saveAsImage : {show: true}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: [{$date}]
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                name:'访问量',
                                type:'line',
                                stack: '总数',
                                data:[{$usersDatas}],
                                itemStyle: {
                                    normal: {
                                        label: {
                                            show: true, //开启显示
                                            position: 'top', //在上方显示
                                            textStyle: { //数值样式
                                                color: 'black',
                                                fontSize: 12
                                            }
                                        }
                                    }
                                }
                            }
                        ]
                    }
                );
            }
        );
        $(window).resize(function(){
            myChart.resize();
        })
    });
</script>
</html>